<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模块化操作</title>
</head>

<body>
  <!-- 
    代码可以按需引入 相互之间的关联 会更加密切

    如果单纯通过 script 标签引入 当文件过多的时候 会导致代码结构混乱

    使用模块化引入的方式 使得代码结构更加清晰

    模块化的两个核心：
      导入：
        import {a,b,c} from 'xxx/object.js' 从object.js文件中引用 a,b,c 资源 
        可以是变量，常量，函数，对象等...
      导出：
        export default fn(){} 导出函数 fn 可以被其他文件导入使用

    但是目前，浏览器对模块化的支持还是不足 可能会出现跨域的问题，需要使用socket实时导入导出才能正常使用
  -->

  <script type="module">

    // 分别从数据模块和功能模块提取资源 然后整合 使得主程序代码结构简单明了

    import data from './数据模块.js' 
    import {ad,intro} from './功能模块.js'; 

    console.log(data.a) // 1
    console.log(data.obj) // {name: '老大',age: 18}

    ad(data.a) // 6
    intro.call(data.obj) // 我叫老大，几年18岁！
  </script>

  <script nomodule="">
    alert('你的浏览器不支持ES模块！')
  </script>
</body>

</html>